<!-- -----------------------------商品上架 -------------------------->

<template>
 <el-space direction="vertical" class="w-full">
    <el-card class="box-card" style="width: 100%">
      <div class="text item">
        <h2 class="pb-[15px]">商品介绍</h2>
        <el-form :model="form" label-width="120px">
          <el-form-item label="商品ID" v-if="form.id">
            <el-input v-model="form.id" disabled />
          </el-form-item>
          <el-form-item label="商品编号">
            <el-input v-model="form.goodsSn" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.names" />
          </el-form-item>
          <el-form-item label="市场售价">
            <el-input v-model="form.counterPrice" placeholder="0.00" />
          </el-form-item>

          <el-form-item label="是否新品">
            <el-radio-group v-model="form.isNew">
              <el-radio label="新品" />
              <el-radio label="非新品" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否热品">
            <el-radio-group v-model="form.isHot">
              <el-radio label="普通" />
              <el-radio label="热卖" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否在售">
            <el-radio-group v-model="form.isOnSale">
              <el-radio label="在售" />
              <el-radio label="未售" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品图片">
            <upload></upload>
          </el-form-item>
          <el-form-item label="宣传画廊">
            <upload></upload>
          </el-form-item>

          <el-form-item label="商品单位">
            <el-input v-model="form.unit" placeholder="件/个/盒" />
          </el-form-item>

          <el-form-item label="关键字">
            <el-button type="primary">Primary</el-button>
          </el-form-item>

          <el-form-item label="所属分类">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属品牌">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品介绍">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="商品详细介绍">
            <wangEditor></wangEditor>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 商品规格----------------------------- -->
    <el-card class="box-card" style="width: 100%">
      <h2 class="pb-[15px]">商品规格</h2>
      <div>
        <el-radio-group v-model="radio1" size="large">
          <el-radio-button label="默认标准规格" />
          <el-radio-button label="多规格支持" />
        </el-radio-group>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="规格名" width="180" />
        <el-table-column prop="name" label="规格值" width="180" />
        <el-table-column prop="address" label="规格图片" />
      </el-table>
    </el-card>
    <!-- 商品库存----------------------------- -->
    <el-card class="box-card" style="width: 100%">
      <h2 class="pb-[15px]">商品库存</h2>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="货品规格" width="180" />
        <el-table-column prop="name" label="货品数量" width="180" />
        <el-table-column prop="address" label="货品图片" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button type="primary">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 商品参数----------------------------- -->
    <el-card class="box-card" style="width: 100%">
      <h2 class="pb-[15px]">商品参数</h2>
      <el-button type="primary">添加</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="商品参数名称" width="180" />
        <el-table-column prop="name" label="商品参数值" width="180" />
        <el-table-column prop="address" label="操作" />
      </el-table>
    </el-card>
  </el-space>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import upload from "@/components/Upload.vue";
import wangEditor from "@/components/wangEditor.vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
// import { UploadFile ,ElMessage} from 'element-plus'
import { useRoute,useRouter } from "vue-router";
import { detail } from "@/api/api.js";
//复文本框
const route=useRoute()
const router=useRouter()
const imageUrl = ref("");
const radio1 = ref("New York");
// const paramList = JSON.parse(route.params.id)
const form = reactive({
  goodsSn: "",
  names: "",
  counterPrice: "",
  isNew: "",
  isHot: false,
  isOnSale: [],
  unit: "",
  value: "",
  value: "",
});

//上传
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file) => {
  console.log(file);
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleDownload = (file) => {
  console.log(file);
};

// onMounted(()=>{
// })

//接受路由传参
if(route.query.id){
  detail(route.query.id).then(res=>{
  form.id=res.data.data.goods.id
  form.goodsSn=res.data.data.goods.goodsSn
  form.names=res.data.data.goods.name
  form.counterPrice=res.data.data.goods.counterPrice
  form.isNew=res.data.data.goods.isNew?'新品':'非新品'
  form.isHot=res.data.data.goods.isHot?'普通':'热卖'
  form.isOnSale=res.data.data.goods.isOnSale?'在售':'未售'
  form.unit=res.data.data.goods.unit
  // from.goodsSn=res.data.data.goods.id
})
}

</script>

<style lang="scss" scoped>
:deep(.el-space__item) {
  width: 100%;
}
</style>